<template>
  <div>
    <van-sticky :offset-top="0">
      <van-nav-bar title="确认挂号" left-arrow @click-left="onClickLeft" />
    </van-sticky>
  
  <div class="cont">
    <!-- 医生信息 -->
    <ul class="doctor">
      <li>
        <p>挂号医院：</p>
        <b>
          <p>陆军特色医学中心（大坪医院）</p>
        </b>
      </li>
      <li>
        <p>科室：</p>
        <p><b>放疗中心门诊</b></p>
      </li>
      <li>
        <p>医生：</p>
        <p><b>刘大胜</b></p>
      </li>
      <li>
        <p>门诊类型：</p>
        <p><b>副主任医师（放疗副主任）</b></p>
      </li>
      <li>
        <p>就诊时间：</p>
        <p><b>2023-02-20 上午 08:00~8:15</b></p>
      </li>
    </ul>

    <!-- 用户验证 -->

    <!-- <ul class="user">
        <li><p>用户名</p><input type="text" placeholder="请输入用户名" v-model="myname" @blur:any="test"><span>*{{ msg }}</span></li>
        <li><p>身份证号</p><input type="text" placeholder="请输入身份证号"></li>
        <li><p>联系手机</p><input type="text" placeholder="请输入手机号" ></li>
        <li><p>联系地址</p><input type="text" placeholder="请输入联系地址" ></li>
      </ul> -->



    <div class="cost">
      <div><b>挂号费用</b></div>
      <ul>
        <li>
          <p>医院收费：</p>
          <p>22.00元</p>
        </li>
        <li>
          <p>信息服务费：</p>
          <p>0.00元</p>
        </li>
        <li>
          <p>合计：</p>
          <p class="pp" style="color: #d67e4d">22.00元</p>
        </li>
      </ul>
    </div>

    <van-form @failed="onFailed">
      <van-cell-group inset>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field v-model="value1" label="用户名" name="myname" placeholder="请输入用户名" input-align="right" error-message-align="right" :rules="[{ required, message: '*请输入正确的姓名' }]" />
        <van-field v-model="value2" label="身份证号" name="ID" placeholder="请输入身份证号" input-align="right" error-message-align="right" :rules="[{ validator, message: '*请输入正确的身份证号' }]" />
        <van-field v-model="value3" label="手机号" name="phone" placeholder="请输入手机号" input-align="right" error-message-align="right" :rules="[{ pattern, message: '*请输入正确大的手机号' }]" />
        <van-field v-model="value4" label="地址" name="address" placeholder="请输入联系地址" input-align="right" error-message-align="right" :rules="[{ required, message: '*请输入地址' }]" />
        <van-field v-model="result" is-link readonly name="datePicker" label="时间选择" placeholder="点击选择时间"
          @click="showPicker = true" />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
      </van-cell-group>
    </van-form>

    <!-- 无 -->
    <div class="pay">
      <p>支付方式</p>
      <p>到院支付</p>
    </div>

    <button @click="onHome">确认预约</button>
  </div>
</div>
</template>

<script setup lang="ts">
import router from "@/router";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { closeToast, showLoadingToast } from "vant";

// 返回上级
const onClickLeft = () => history.back();

const text = "";

const route = useRoute();

const hospital_id = route.params.id;

// 表单信息
const value1 = ref("");
console.log(value1)
const value2 = ref("");
const value3 = ref("");
const value4 = ref("");

const required = true
const validator = (val:any) => /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val)
const pattern = /^1[34578]\d{9}$/

// 选择时间
const result = ref('');
    const showPicker = ref(false);
    const onConfirm = ({ selectedValues }:any) => {
      result.value = selectedValues.join('/');
      showPicker.value = false;
    }



const onFailed = (errorInfo: any) => {
  console.log("failed", errorInfo);
};

// 确认预约
const onHome = function () {
  // router.push("/");
  // alert("预约成功");
};
</script>

<style scoped>
:root{
  --van-radius-lg: 0;
}
.van-nav-bar {
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-background: #4f87da;
  --van-nav-bar-arrow-size: 22px;
  --van-nav-bar-title-font-size: 22px;
}
.van-cell-group--inset{
  margin:11px 0;
}
.van-field__label{
  color: #000; 
}
.van-field__label{
  font-weight: 800;
  font-size: 15px;
}

.cont {
  background-color: #e8e8e8;
  height: 900px;
}

.cont>.doctor {
  background-color: #fff;
}

.cont>.doctor>li {
  height: 50px;
  /* line-height: 50px; */
  display: flex;
  padding-left: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.cont>.doctor>li>p:first-child {
  width: 100px;
  color: #b3b3b3;
}

.cont>.doctor>li>p:last-child {
  color: #212121;
}

.user {
  margin-top: 11px;
  background-color: #fff;
}

.user>li {
  /* line-height: 50px; */
  height: 50px;
  display: flex;
  padding: 0 15px;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
}

.user>li>input {
  border-style: none;
  text-align: right;
}

input::-webkit-input-placeholder {
  color: #b3b3b3;
}

.user>li>p {
  color: #b3b3b3;
}

.cost {
  margin-top: 11px;
  background-color: #fff;
}

.cost>div {
  line-height: 50px;
  padding: 0 15px;
  border-bottom: 1px solid #e8e8e8;
}

.cost>ul>li {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  border-bottom: 1px solid #e8e8e8;
}

.cost>ul>li>p:first-child {
  color: #b3b3b3;
}

/* 合计 */
.pp {
  color: #d67e4d;
}

.pay {
  height: 50px;
  /* line-height: 50px; */
  background-color: #fff;
  margin-top: 11px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
}

.pay>p:first-child {
  color: #b3b3b3;
}

button {
  margin: 15px 15px;
  width: 92vw;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 11px;
  color: #fff;
  background: #4f87da;
  border-style: none;
}
</style>
